<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <meta content="never" name="referrer" />
  </head>
  <body>
    <canvas id="myCanvas" width="400" height="250"></canvas>

    <script>
      const canvas = document.getElementById('myCanvas')
      const ctx = canvas.getContext('2d')
      // ctx.fillText('Hello world', 50, 50)
      // ctx.font = 'Bold 20px Poppins'
      // ctx.textAlign = 'center'
      // ctx.strokeText('Hello world', 100, 100)

      // 渐变色和图像填充
      // const gradient = ctx.createLinearGradient(0, 0, 200, 0)
      // gradient.addColorStop(0, 'green')
      // gradient.addColorStop(1, 'white')
      // ctx.fillStyle = gradient
      // ctx.fillRect(10, 10, 200, 100)

      // var gradient = ctx.createRadialGradient(100, 100, 50, 100, 100, 100)
      // gradient.addColorStop(0, 'white')
      // gradient.addColorStop(1, 'green')
      // ctx.fillStyle = gradient
      // ctx.fillRect(0, 0, 200, 200)

      // var img = new Image()
      // img.src =
      //   'http://tiebapic.baidu.com/forum/w%3D580/sign=e00a790b6e381f309e198da199014c67/7a1f8c01a18b87d6595ae02c410828381f30fde9.jpg?tbpicau=2023-12-01-05_e06178a9ef3db53e4e2d532f0e821994'
      // img.onload = function () {
      //   var pattern = ctx.createPattern(img, 'repeat')
      //   ctx.fillStyle = pattern
      //   ctx.fillRect(0, 0, 400, 400)
      // }

      // 阴影
      ctx.shadowOffsetX = 10
      ctx.shadowOffsetY = 10
      ctx.shadowBlur = 5
      ctx.shadowColor = 'rgba(0,0,0,0.5)'

      ctx.fillStyle = 'green'
      ctx.fillRect(10, 10, 100, 100)
    </script>
  </body>
</html>
